<template>
	<view>
		<u-navbar title=" 设置" :is-back="true"></u-navbar>
		<view class="username-setting">
		<view class="title-head">
			账号设置
		</view>
			<view class="my-username">
				<view class="image-left">
					<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201303%2F29%2F20130329205806_kTTnv.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628837166&t=5a74eb3e85cd25bf5c5031796f6000b1" ></image>
					<text>退出当前账号</text>
				</view>
				<view class="icon">
					<u-icon name="arrow-right" size="30"></u-icon>					
				</view>
			</view>
		</view>
		<!-- 基本设置 -->
		<view class="basic-seeting-box">
			<view class="basic-title">
				基本设置
			</view>
			<view class="setting-box" v-for="(item,index) in settingList" :key="index">
				<view class="message-setting">
				{{item.name}}
					<view class="show-text">
					{{item.show}}
					</view>
				</view>
				<view class="icon">
					<u-icon :name="item.icon" size="30"></u-icon>					
				</view>
			</view>
		</view>
		<!-- 关于 -->
		<view class="about">
			<view class="about-title">
				关于书旗小说免费小说
			</view>
			<view class="about-box">
				版本更新
				<text>当前已经是最新版本</text>
			</view>
			<view class="introdure">
				版本介绍
				<u-icon name="arrow-right" size="30" color="gray"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {settingList} from "../../utils/bodyList.js"
	export default {
		data() {
			return {
				settingList:settingList
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.username-setting{
.title-head{
	font-size: 32rpx;
	color: gray;
	padding: 20rpx;
	background: #ededed;
}
	
	.my-username{
		display: flex;justify-content: space-between;
		.image-left{
			display: flex;
			margin: 30rpx;
			text{
				text-align: center;
				padding: 30rpx;
				font-size: 30rpx;
			}
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
		.icon{
			margin: auto 30rpx
		}
	}
}
.basic-seeting-box{
	.basic-title{
		font-size: 32rpx;
		color: gray;
		padding: 30rpx;
		background: #ededed;
	}
	.setting-box{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f4f4f4;
		.message-setting{
			font-size: 32rpx;
			margin: 30rpx;
			.show-text{
				color: gray;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}
		.icon{
			margin: auto 30rpx;
			color: gray;
		}
	}
}
.about{
	.about-title{
		font-size: 32rpx;
		color: gray;
		padding: 20rpx;
		background: #ededed;
	}
	.about-box{
		display: flex;
		justify-content: space-between;
		margin: 30rpx;
		
		font-size: 32rpx;
		text{
			color: gray;
			font-size: 28rpx;
		}
	}
	.introdure{
		display: flex;
		justify-content: space-between;
		margin: 30rpx;
		font-size: 32rpx;
	}
}
</style>
